<template>
   <div v-if="thumbnail.imgWrap">
      <div class="thumbnail">
         <ul>
            <li v-for="(item, index) in thumbnail.imgWrap"
                :key="index"
                @click="replaceSrc(item.src)"
            >
               <router-link to="">
                  <img v-lazy="item.src" alt="">
               </router-link>
            </li>
         </ul>
      </div>
   </div>
</template>

<script>
   export default {
      name: 'thumbnail-box',
      data() {
         return {
            imgWrap: false
         }
      },
      props: {
         thumbnail: {
            type: [Array, Object],
            default() {
               return []
            }
         },
         index: {
            type: null,
            default() {
               return ''
            }
         }
      },
      methods: {
         replaceSrc(src) {
            this.$emit('replaceSrc', src, this.index)
         }
      }
   }
</script>

<style scoped lang="stylus">
   .thumbnail
      width 100%
      display flex
      justify-content center
      ul
         display flex
         a
            display block
            height 42px
            width 42px
            border 1px solid #f4f4f4
            &:hover
               border-color #999
            img
               height 42px
               width 42px
   ul li:not(:nth-child(1))
      margin-left 5px
</style>
